import { useState } from "react";

import "./App.css";

const App = () => {
  console.log("函数执行了 ---> 组件创建完毕！");
  /*
   *   state
   *     - state实际就是一个被React管理的变量
   *         当我们通过setState()修改变量的值时，会触发组件的自动重新渲染
   *     - 只有state值发生变化时，组件才会重新渲染
   *     - 当state的值是一个对象时，修改时是使用新的对象去替换已有对象
   *     - 当通过setState去修改一个state时，并不表示修改当前的state
   *         它修改的是组件下一次渲染时state值
   *     - setState()会触发组件的重新渲染，它是异步的
   *           所以当调用setState()需要用旧state的值时，一定要注意
   *           有可能出现计算错误的情况
   *           为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
   *
   * */

  const [counter, setCounter] = useState(1);
  const [user, setUser] = useState({ name: "孙悟空", age: 18 });

  const addHandler = () => {
    /*
    setState()会触发组件的重新渲染，它是异步的
   *           所以当调用setState()需要用旧state的值时，一定要注意
   *           有可能出现计算错误的情况
   *           为了避免这种情况，可以通过为setState()传递回调函数的形式来修改state值
    */
   setTimeout(() => {
    // setCounter(counter + 1); // 此时只会执行一次

    setCounter((preCounter) => preCounter+1)
     
   }, 1000);
  };
  const reduceHandler = () => {
    setCounter(counter - 1);
  };

  const changeHandler = () => {
    // 如果直接修改旧的state对象，由于对象还是那个对象，所以不会生效
    // user.name = "猪八戒";
    // setUser(user);
    // console.log(user);

    // 需要浅复制一层，使新对象和旧对象的引用地址不是一个
    setUser({ ...user, name: "猪八戒" });
  };

  return (
    <div className={"app"}>
      <h1>
        {counter}--{user.name}--{user.age}
      </h1>
      <button onClick={reduceHandler}>-</button>
      <button onClick={addHandler}>+</button>
      <button onClick={changeHandler}>改变对象的值</button>
    </div>
  );
};

export default App;
